 <template>
  <div id="map" style=""></div>
</template>
<script>
export default {
  name: "bmap",
  mounted() {
    this.$nextTick(() => {
      this.initmap();
      this.init1("古交市");
    });
  },
  methods: {
    initmap() {
      //创建地图
      this.map = new AMap.Map("map", {
        center: [112.175875, 37.907109], //设置中心点
        // pitch: 60,
        // rotation: -35,
        polygon:[],
        resizeEnable: true, //是否监控地图容器尺寸变化
        features: ["bg", "road", "point"], //隐藏默认楼块
        mapStyle: "amap://styles/8ec06094a79913f3ab1fe98cc29f8046", //设置地图的显示样式
        // layers: [new AMap.TileLayer.Satellite()], //地图图层（卫星图层）    new AMap.TileLayer()
        zoom: 12, //地图显示的缩放级别
      });
    },
    init1(city) {
      //区域遮盖
      var that = this;
      if (that.polygon) {
        that.map.remove(that.polygon);
      }
      AMap.plugin("AMap.DistrictSearch", function () {
        new AMap.DistrictSearch({
          extensions: "all",
          subdistrict: 0,
        }).search(city, function (status, result) {
          // 外多边形坐标数组和内多边形坐标数组
          var outer = [
            new AMap.LngLat(-360, 90, true),
            new AMap.LngLat(-360, -90, true),
            new AMap.LngLat(360, -90, true),
            new AMap.LngLat(360, 90, true),
          ];
          var holes = result.districtList[0].boundaries;
          console.log(holes);
          var pathArray = [outer];
          pathArray.push.apply(pathArray, holes);
          that.polygon = new AMap.Polygon({
            pathL: pathArray,
            strokeColor: "#4ea8f8", //城市边界颜色
            strokeWeight: 1,
            fillColor: "#0e215b", // 遮罩背景色黑色
            fillOpacity: 1,
          });
          that.polygon.setPath(pathArray);
          that.map.add(that.polygon);
        });
      });
    },
  },
};
</script>
<style lang="stylus" scoped>
#map {
  width: 607px;
  height: 604px;
}
</style>
